<template>
	<view class="goods">
		<view class="left">
			<Img :src="goods.giftImage" :customStyle="{width:'140rpx',height:'150rpx'}" />
		</view>
		<view class="center">
			<view class="u-main-color u-line-2 u-font-bold u-font-24">
				{{goods.giftName}}
			</view>
			<view class="u-font-24 u-line-1">
				{{goods.giftSpec}} {{goods.giftBrand}}
			</view>
		</view>
		<view class="right">
			<view class="top">
				<view class="price">
					￥{{parseFloat(goods.price)}}
				</view>
			</view>
			<text class="tag u-m-r-4 ">
				赠品
			</text>
			<view class="u-tips-color u-font-24">
				× {{goods.qty}}
			</view>
		</view>
	</view>
</template>

<script>
	import Img from "@/components/goods/img.vue"
	export default{
		components:{Img},
		props:{
			goods:{
				type:Object
			}
		},
		mounted() {
			console.log(this.goods)
		}
	}
</script>

<style lang="scss" scoped>
	.goods{
		display: flex;
		.tag{
			border: 1rpx solid $u-type-error;
			font-size: 24rpx;
			color: $u-type-error;
			padding: 0 4rpx;
			display: inline-block;
			width: 60rpx;
		}
		.price{
			color: $u-type-error;
			font-size: 32rpx;
			text-decoration: line-through;
		}
		.center{
			margin-left: 16rpx;
			width: 346rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 110rpx;
		}
		.right{
			width: 152rpx;
			text-align: right;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-end;
			height: 110rpx;
		}
	}
</style>
